import React from "react"
import ReactSwipe from 'react-swipe';
import "./style.less"

export default class Banner extends React.Component {

    constructor() {
        super();
        this.state = {
            index: 0
        }
    }

    render() {

        const banners = this.props.banners;
        console.log("ggege",banners);
        const opt = {
            auto: 3000,
            callback: function(index, ele) {
                this.setState({
                    index: index
                })
            }.bind(this)
        }
        return (
            <div id="home-category">
                <ReactSwipe swipeOptions={opt}>
                {
                    banners.map((element,index) => {
                        return (
                            <div key={index} className="carousel-item">
                              <img src={element} alt="蓝将" />
                            </div>
                        )
                    })
                }
                </ReactSwipe>
                <div className="index-container">
                    <ul>
                    {
                        banners.map((element,index) => {
                            return <li key={index} className={this.state.index === index ? "selected" : ''}></li>
                        })
                    }
                    </ul>
                </div>
            </div>
        )
    }
}